<!-- 商品列表组件 <good-list :list="xx"></good-list> -->
<template>
  <view class="goodItem">
    <image
      class="good-img"
      :src="
        good.pic
          ? (good.pic.startsWith('https')
            ? good.pic
            : 'https://saas.hzjhckj.com/api' + good.pic)
          : 'https://building-d.oss-cn-hangzhou.aliyuncs.com/img/img.jpg'
      "
      mode="widthFix"
    />
    <view class="flex-item">
      <view class="good-name">{{ good.name }}</view>
      <view class="good-price">
        <text class="price" v-if="good.minPrice">¥{{ good.minPrice }}</text>
        <text class="minPrice" v-if="good.showPrice"
          >¥{{ good.showPrice }}</text
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    good: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style lang="scss">
.goodItem {
  .good-img {
    width: 350rpx;
    height: 350rpx;
    margin-right: 20rpx;
  }

  .flex-item {
    padding: 0 15rpx;
    .good-name {
      font-size: 28rpx;
      margin-bottom: 8rpx;
      overflow: hidden;
    }
    .good-price {
      margin-bottom: 8rpx;
    }

    .price {
      font-size: 28rpx;
      color: red;
    }
    .minPrice {
      font-size: 26rpx;
      color: #999;
      margin-left: 10rpx;
      text-decoration: line-through;
    }
  }
}
</style>
